<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <div>{{ count }}</div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const { createApp, ref, reactive } = Vue;

      const app = createApp({
        setup() {
          const count = ref(0);
          const state = reactive({
            // Ref 对象作为 reactive 的属性被访问或修改时自动解包
            count,
          });

          // 访问 Ref 对象的时候自动解包
          console.log(state.count); // 0
          // 修改 reactive 属性为 Ref 对象也会自动解包
          state.count = 1;
          console.log(count.value); // 1
          count.value = 2;
          console.log(state.count); // 2

          return {
            count,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
